/*
*   @Author: 1296
*   @Date: 2025-03-21
*   @Description: 悬浮按钮
*/

<template>
  <div class="floating-buttons">
    <button class="circle-button" @click="scrollToTop" :title="$t('floatingButtons.scrollToTop')">
      ⬆️
    </button>
    <button class="circle-button" @click="navigateToLanguageSettings" :title="$t('floatingButtons.languageSettings')">
      🌐
    </button>
    <button class="circle-button" @click="scrollToBottom" :title="$t('floatingButtons.scrollToBottom')">
      ⬇️
    </button>
  </div>
</template>

<script>
export default {
  name: 'FloatingButtons',
  methods: {
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    scrollToBottom() {
      window.scrollTo({
        top: document.documentElement.scrollHeight,
        behavior: 'smooth'
      });
    },
    navigateToLanguageSettings() {
      const userToken = sessionStorage.getItem('userToken');
      const jobCode = sessionStorage.getItem('jobCode')
      if (userToken) {
        this.$router.push({
          path: `/${jobCode}/setting`,
          query: { section: 'language' }
        });
      } else {
        this.$router.push('/languageSettings');
      }
    }
  }
};
</script>

<style scoped>
.floating-buttons {
  position: fixed;
  right: calc(30 / 1920 * 100vw);
  bottom: calc(30 / 1080 * 100vh);
  display: flex;
  flex-direction: column;
  gap: calc(20 / 1080 * 100vh);
  z-index: 1000;
}

.circle-button {
  width: clamp(40px, calc(60 / 1920 * 100vw), 60px);
  height: clamp(40px, calc(60 / 1920 * 100vw), 60px);
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #808080;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.circle-button:hover {
  background-color: rgb(128, 128, 128);
}
</style>
